<template>
<div>

    <div style="margin-bottom:2.667vw;">
        <navbar>  </navbar>
    </div>

    <!-- 头像显示以及上传图片的组件 -->
    <div class="uploadFile">
        <van-uploader class="uploadImg" preview-size="100vw" :after-read="afterRead" />
        <editBanner left="头像">
            <img class="cover" 
                :src="model.user_img" 
                slot="right" 
                v-if="model.user_img"
            >
            <img class="cover" 
                src="../assets/cover.jpg" 
                slot="right" 
                v-else
            >
        </editBanner>
    </div>

    <editBanner left="昵称" @bannerChange="show=true">
        <a href="#" slot="right">{{model.name}}</a>
    </editBanner>
    <editBanner left="账号">
        <a href="#" slot="right">{{model.username}}</a>
    </editBanner>
    <editBanner left="性别" @bannerChange="genderShow=true">
        <a href="#" slot="right">{{model.gender}}</a>
    </editBanner>
    <editBanner left="个性签名" @bannerChange="showArea=true" > 
        <div class="van-multi-ellipsis--l2 user_desc" slot="right">
            {{model.user_desc}}
        </div>
    </editBanner>

    <!-- 修改昵称 -->
    <van-dialog v-model="show" 
        title="修改你的昵称" 
        show-cancel-button 
        @confirm="confirmClick"
     >
        <van-field v-model="text"  autofocus class="edit_nickname" />
    </van-dialog>

    <van-dialog v-model="showArea" 
        title="修改你的个性签名" 
        show-cancel-button 
        class="edit_tanchu"
        @confirm="confirmArea"
     >
        <van-field v-model="textArea" class="edit_nickname" autofocus/>
    </van-dialog>

    <van-action-sheet close-on-click-action v-model="genderShow" :actions="actions" @select="onSelect" />

    <el-button plain class="break" type="info" @click="prevPage">返回个人中心</el-button>


</div>
</template>

<script>

   import navbar from "../components/common/navbar.vue"
   import editBanner from "../components/common/editBanner.vue"

export default {
    data() {
        return {
           model:{},
           show: false,
           text:"",
           textArea:"",
           showArea:false,
           genderShow:false,
           actions: [{ name: '男' }, { name: '女' }],
        };
    },

    methods: {
       async selectUser(){
           //注意这里用的是async await 转化的同步数据
           const res = await this.$http.get("/user/" + localStorage.getItem('id'))
           this.model = res.data[0]
       },

        async afterRead(file) {//图片上传
            // 此时可以自行将文件上传至服务器
            // console.log(file);
            const fromdata = new FormData()
            // console.log(fromdata);
            
            fromdata.append('file',file.file)//追加一个文件属性
            //调用接口，发送图片数据，然后接收到后台返回的在线图片路径
            const res = await this.$http.post('/upload',fromdata)
            
            this.model.user_img = res.data.url

            this.userUpData()
        },

        async userUpData(){//服务器保存model信息
            //将头像上传都后台的个人信息中，然后再保存下来。等同于连同昵称一起保存
            //这里的头像数据是直接在 model 数据里面更新保存的。
            const res = await this.$http.post('/update/' + localStorage.getItem('id'),this.model)
        },

        confirmClick(){//昵称的修改
            if(this.text==''){
                this.$msg.fail('内容不能为空');
                return 
            }
            this.model.name = this.text
            this.$msg({
                message: '修改成功',
                icon: 'https://img.yzcdn.cn/vant/logo.png',
            });
            this.userUpData()//上传已经修改了的数据到服务器保存
        },
        
        confirmArea(){//个性签名的修改
            if(this.textArea==''){
                this.$msg.fail('内容不能为空');
                return 
            }
            
            if(this.textArea.length>=22){
                this.$msg.fail('内容长度不能超过22个字符');
                return 
            }
            
            this.$msg({
                message: '修改成功',
                icon: 'https://img.yzcdn.cn/vant/logo.png',
            });
            this.model.user_desc = this.textArea
            this.userUpData()//上传已经修改了的数据到服务器保存
        },

        onSelect(res){//性别的修改
            this.model.gender = res.name
            this.$msg.success("修改成功")
            this.userUpData()
        },

        prevPage(){
            this.$router.go(-1)
        }



    },

    components:{
        navbar,editBanner
    },
    
    created(){
        this.selectUser()
    }


}

</script>


<style scoped>

    .cover{
        width: 10.667vw;
        height: 10.667vw;
        border-radius: 13.333vw;
    }
    a{
        color: #666;
    }

    .uploadFile{
        position: relative;
        overflow: hidden;
    }
    .uploadImg{
        position: absolute;
        opacity: 0;
    }

    .edit_tanchu{

    }

    .edit_nickname{
        width: 80%;
        border:1px solid #eee;
        margin: 0 6.667vw;
    }

    .user_desc{
        margin-left:21.333vw;
        word-break: break-all;
    }

    .break{
        width: 100vw;
        margin-top:2.667vw;
        color: #fb7299 !important;
        font-weight: bolder;
    }
   

</style>